<script setup>
import { packageInfo } from '@/apis/pay';
import { useUserInfoStore, useI18nStore } from '@/stores';
const userInfoStore = useUserInfoStore();
const i18nStore = useI18nStore();
const route = useRoute();
const id = route.params.id;
const active = ref(2);

const { listInfo } = storeToRefs(userInfoStore);
const qrcode = ref('');
function getInfo() {
  packageInfo({ price_id: id, type: active.value }).then((res) => {
    if (res.status === 0) {
      qrcode.value = res.data.code_url;
    }
  });
}
function changeActive(v) {
  active.value = v;
  getInfo();
}
onMounted(() => {
  getInfo();
});
const paragraphList = computed(() => {
  switch (route.query.type) {
    case '1':
      return ['16', '17', '18', '19'];
    case '2':
      return ['6', '7', '8', '9', '10'];
    case '3':
      return ['1', '2', '3', '4', '5'];
    case '4':
      return ['11', '12', '13', '14', '15'];
    default:
      return [];
  }
});
</script>

<template>
  <div class="auto pc:max-w-[1000px] mobile:px-[20px]">
    <h1 class="text-[32px] font-bold mt-[20px] mb-[20px] text-center">
      {{ i18nStore.translate('upgrade_file_size') }}
    </h1>
    <div class="mb-[20px]">
      <div class="title mb-[20px]">
        {{ i18nStore.translate('choose_file_size') }}
      </div>
      <ul class="flex flex-wrap justify-between">
        <li
          class="border-[#5CD6C8] package w-[200px] h-[200px] border flex flex-col items-center justify-evenly mobile:mb-[20px]"
        >
          <h3 class="text-[24px] border-b-[1px] pb-[10px]">
            {{ i18nStore.translate('upgrade_vip') }}
          </h3>
          <div class="text-center">
            <p class="text-[24px] text-[#5CD6C8] font-bold">
              {{ listInfo.description }}
            </p>
            <p class="text-[14px] text-[#666]">
              {{ i18nStore.translate('file_speed_unlimited_transfer') }}
            </p>
            <p class="text-[14px] text-[#666]">
              {{ i18nStore.translate('Single_file_size') }}
            </p>
            <p class="text-[14px] text-[#666]">
              {{ listInfo.description }}{{ i18nStore.translate('file_up_to') }}
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div v-if="paragraphList.length">
      <h1 class="font-bold text-[24px] mb-2">
        {{ i18nStore.translate('buy_tips') }}
      </h1>
      <p v-for="(item, index) in paragraphList" :key="item">
        {{ index + 1 }}：{{ i18nStore.translate(`costumbre${item}`) }}
      </p>
    </div>
    <div class="mb-[20px]"></div>
    <div class="mb-[20px]">
      <div class="title mb-[10px]">
        {{ i18nStore.translate('total_amount') }}
      </div>
      <div>
        <p class="font-bold text-[24px]">￥{{ listInfo.price }}</p>
      </div>
    </div>
    <div>
      <div class="title mb-[10px]">
        {{ i18nStore.translate('choose_payment_method') }}
      </div>
      <ul class="flex flex-wrap justify-left mb-[10px]">
        <li
          class="w-[120px] h-[50px] border flex flex-col items-center justify-evenly mr-[20px]"
          :class="active == 1 ? 'border-[#5CD6C8]' : ''"
          @click="changeActive(1)"
        >
          <div>{{ i18nStore.translate('alipay') }}</div>
        </li>
        <li
          class="w-[120px] h-[50px] border flex flex-col items-center justify-evenly"
          :class="active == 2 ? 'border-[#5CD6C8]' : ''"
          @click="changeActive(2)"
        >
          <div>{{ i18nStore.translate('wechat') }}</div>
        </li>
      </ul>
      <div class="w-[120px] h-[120px]" v-if="qrcode">
        <Qrcode :value="qrcode" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.package {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #5cd6c8;
    left: 0;
    top: 0;
    // display: none;
  }
}
</style>
